<template>
	<view class="login-box">
		<q-navbar title="登录" :isBack="false" />
		<view class="title">
			仓储物流
		</view>
		<!-- 表单 -->
		<view class="login-form">
			<u-form labelPosition="left" :model="form" :rules="rules" ref="form">
				<u-form-item prop="username" leftIcon="account" labelWidth="50rpx" :leftIconStyle="leftIconStyle">
					<u-input v-model="form.username" placeholder="请输入手机号" clearable></u-input>
				</u-form-item>
				<u-form-item prop="password" leftIcon="lock" labelWidth="50rpx" :leftIconStyle="leftIconStyle">
					<u-input v-model="form.password" type="password" placeholder="请输入密码" clearable>
					</u-input>
				</u-form-item>
			</u-form>
		</view>
		<!--按钮-->
		<view class="btn" style="width: 80%;margin: 0 auto;">
			<q-button @submit="clickLogin" :isPosition='false' class="btn" color="#4F7CE0" name="登录" />
		</view>
	</view>
</template>

<script>
	import {
		getToken,
		setToken,
		removeToken
	} from '@/utils/auth'
	import storage from '@/utils/storage'
	export default {
		data() {
			return {
				form: {
					username: "19912121212",
					password: "admin123",
				},
				leftIconStyle: {
					fontSize: '45rpx',
					color: '#E6E6E6'
				},
				rules: {
					userName: {
						type: 'string',
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change'],
					},
					password: {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur'],
					},
				},
			}
		},
		onReady() {},
		mounted() {},
		created() {

		},
		methods: {
			clickLogin() {
				let _this = this
				_this.$api.login(this.form).then(async (res) => {
					setToken(res.token)
					console.log(this.$api)
					let {
						user
					} = await this.$api.user_findInfo()
					storage.set('userInfo', user)
					uni.navigateTo({
						url: '/pages/index/index'
					});
				}).catch((errors) => {
					// uni.$message.error('校验未通过')
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.login-box {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			width: 35%;
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
			margin: 80rpx 0 80rpx 0;
		}

		.login-form {
			width: 70%;
		}


		.btn {
			margin: 100rpx 0 0 0;
		}
	}
</style>